JS基础（绑定及解绑事件，元素属性及方法，元素位置及宽高的值）

JS 绑定及解绑事件

• 事件绑定的三种方式

  • .addEventListener('事件类型'，命名函数，布尔值)　　　//IE8不支持　　　　　　(this代表的是当前绑定事件的对象)
  • .removeEventListener('事件类型'，函数名字，false)　　　//移除事件
    (注意：addEventListener中的第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。)
  • .attachEvent('on事件类型'，命名函数)　　　 　　　　//谷歌，火狐不支持　　 this代表的是window
  • .detachEvent('on事件类型'，函数名字)　　　　　　　//解绑事件　　
  • 对象.on事件名字 = 事件处理函数--->绑定事件
  • 对象.on事件名字 = null
• 事件冒泡：多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了.
• 如何阻止事件冒泡：
  window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持。
  event.stopPropagation(); 阻止事件冒泡---->谷歌和火狐支持
• event对象的常用属性：
  var e = event || window.event　　// window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
  event.type 　　　　　　　　　　 //事件类型
  event.target　　　　　　　　　　 //事件触发的元素

JS 事件类型

　　在元素的事件处理器中：this指代的就是元素本身

• .onclick　　　　　　　　//点击事件
• .onmouseover (鼠标移入事件)　/　.onmouseout(鼠标移出事件)
• .onfocus　(输入框获取焦点) /　.onblur(输入框失去焦点)
• .onkeydown　 (按下键盘某个键)　/ .onkeyup　(按下某个键弹起)

JS element元素属性

• .innerText (谷歌，火狐，IE8都支持) / .textContent(不支持IE8)
• .innerHTML(标签内容可以被识别）
• .setAttribute("属性的名字","属性的值") 　　//设置自定义属性
• .getAttribute("属性的名字")　　　　　　 //获取自定义属性的值
• .removeAttribute("属性的名字")　　　　　 //移除自定义属性
• .style.backgroundColor　　　　　　　　　 //style属性还有很多其他属性
• .getAttributeNode('id')　　　　　　　　　 //获取的是元素的键名为‘id’的属性节点
• .parentElement　　 　　　　　　　　　//父级元素
• .childNodes　　　　　 　　　　　　　　//子节点
• .children 　　　　　　　　　　　　　　//获取子元素
• .nodeType　　　　　　　　　　　　　　//节点类型　　1----标签，2---属性，3---文本
• .nodeName　　　
  //节点名字　　标签节点---大写的标签名字，属性节点---小写的属性名字，文本节点----#text
• .nodeValue　　　　　 　　　　　　　　　
  //节点的值　　标签节点---null，属性节点---属性值，文本节点---文本内容
• .parentNode　　　　　　　　　　　　　　//父级节点　　
• .firstChild　　　　　　　　　　　　　　//第一个子节点
• .firstElementChild　　　　　　　　　　　 //第一个子元素
• .lastChild　　　　　　　　　　　　　　　 //最后一个子节点
• .lastElementChild　　　　　　　　　　　 //最后一个子元素
• .previousSibling　　　　　　　　　　　　 //前一个兄弟节点　　　
• .previousElementSibling　　　　　　　　 //前一个兄弟元素
• .nextSibling　　　　　　　　 　　　　　//后一个兄弟节点
• .nextElementSibling　　　　　　　　　　 //后一个兄弟元素　

JS element元素方法

• .appendChild( obj1)　　　　 //追加元素
• .insertBefore( obj1,obj2 )　　//将obj1插入到第二个参数元素obj2之前
• .replaceChild( obj1,obj2 )　　//替换其中某个元素
• .removeChild( obj1 )　　　　 //删除其中某个元素

JS offset、scroll、client系列的值

　　style标签中设置的样式属性是获取不到的，然而在标签中设置的style属性的值时可以获取到的。

　　获取元素的宽高，使用offset系列的值

• offsetWidth　　　　 //获取元素的宽，有边框
• offsetHeight　　　　//获取元素的高，有边框
• offsetLeft　　　　　//获取元素距离左边位置的值
• offsetTop　　　　　//获取元素距离上边位置的值
• scrollLeft　　　　 //向左卷曲出去的距离
• scrollTop　　　　 //向上卷曲出去的距离
• scrollWidth　　　　//元素中内容实际的宽（如果内容较少，没有内容，就是元素自身的宽），没有边框
• scrollHeight　 　　 //元素中内容实际的高（如果内容较少，没有内容，就是元素自身的高），没有边框
• clientWidth　　　　//可视区域的宽（没有边框），边框内部的宽
• clientHeight　　　 //可视区域的高（没有边框），边框内部的高
• clientLeft　　　　　//左边框宽度
• clientTop　　　　　//上边框宽度
• event.clientX、event.clientY　　 //鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条
• event.pageX、event.pageY　　 //类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标（IE8不可用）